<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>活力广东</title>
	<link rel="stylesheet" type="text/css" href="animate.css">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body,html {
			overflow: hidden;
			width: 100%;
			height: 100%;
		}
		body {			
			background: url(img/bg.png) no-repeat; 
			background-size: cover;
		}
		#top{
			width: 85%;
			margin: 120px auto 0;
		}
		#content{
			width: 870px;
			margin: 10px auto;
			overflow: hidden;
		}
		#left{
			width: 450px;
			float: left;
		}
		#right{
			width: 420px;
			float: right;
		}
		#content img{
			height: 139px;
		}
		#content img:hover {
		animation-name:bounce;
		animation-duration: 0.5s;
		}
		#content img {
		animation: bounceIn 0.5s;
		}
		footer {
		margin-top: 100px;
		clear: both;
		text-align: center;
		}
		@media only screen and (max-width: 800px) {
			#top {
				width: 70%;
				margin-top: 0;
				height: 16%;
			}
			#top img:nth-child(1) {
				width: 26%;
				height: 5%;
				position: absolute;
				top: 5%;
				left: 15%;
			}
			#top img:nth-child(2) {
				width: 52%;
				height: 4%;
				position: absolute;
				top: 11%;
				left: 15%;
			}
			#content {
				width: 70%;
				height: 70%;
			}
			#left {
				width: 100%;
				height: 50%;
				}	
			#left a:nth-child(odd) img{
				width: 60%;
				height: 32%;
			}
			#left a:nth-child(even) img{
				width: 38%;
				height: 32%;
			}
			#right {
				width: 100%;
				height: 50%;
			
			}
			
			#right a:nth-child(odd) img{
				width: 38%;
				height: 33%;				
			}
			#right a:nth-child(even) img{
				width: 60%;
				height: 33%;				
			}
			
			footer {
				width: 70%;
				height: 30%;
				margin: 5% auto;
			}
			footer img {
				width: 100%;
			}

		}



	</style>
</head>
<body>
	<div id="top">
		<img src="img/logo.png" alt="">
		<img src="img/welcome.png" alt="">
	</div>
	<div id="content">
		<div id="left">
			<a href="###"><img src="img/visit.png" alt=""></a>
			<a href="###"><img src="img/contract.png" alt=""></a>
			<a href="###"><img src="img/admin.png" alt=""></a>
			<a href="###"><img src="img/guide.png" alt=""></a>
			<a href="###"><img src="img/expo.png" alt=""></a>
			<a href="###"><img src="img/axam.png" alt=""></a>
		</div>
		<div id="right">
			<a href="###"><img src="img/sjzx.png" alt=""></a>
			<a href="###"><img src="img/sina.png" alt=""></a>
			<a href="###"><img src="img/hall.png" alt=""></a>
			<a href="###"><img src="img/tencent.png" alt=""></a>
			<a href="###"><img src="img/traval.png" alt=""></a>
			<a href="###"><img src="img/weico.png" alt=""></a>
		</div>
	</div>
	<footer>
		<img src="img/serial.png"/>
	</footer>
</body>
</html>